<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>公立课表</title>
	<link rel="stylesheet" href="/css/common2.css">
	<link rel="stylesheet" href="/css/popup.css">
	<style>
		.add-period {
			height: 100%;
			width: 100%;
			border: none;
			font-size: 16px;
			text-align: center;
			background: transparent;
		}

		.popup-center {
			height: 370px !important;
		}

		.popup-box {
			height: 300px !important;
		}

		.start-time {
			vertical-align: top;
			position: relative;
			margin: 10px 5px !important;
		}

		.name2 {
			border: none;
			width: 10em;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			font-weight: bold;
			margin-left: 15px;
		}

		.name {
			border: 1px solid slategray !important;
		}

		.del {
			top: 2px;
			right: 15px;
			font-size: 12px;
			color: #ACACAC;
			font-weight: normal;
			position: absolute;
		}
	</style>
</head>


<body>

	<div id="vue-root">
		<a href="public_timetable_item.html">
			<div class="add" style="margin-top: 30px;color: white">添加课表</div>
		</a>
		<div class="add" style="margin-top: 30px;" @click="show=true">添加时段</div>
		<div class="refresh" onclick="location.reload()">刷新</div>
		<div class="table">
			<table class="table_top">
				<thead>
					<tr>
						<th class="one">
							<input type="checkbox" class="check-box" v-model="all">
						</th>
						<th>序号</th>
						<th class="two">课表名称</th>
						<th class="two">班级</th>
						<th class="one">编辑/删除</th>
					</tr>
				</thead>
				<tbody id="list">
					<tr v-for="(timetable,index) in list">
						<td class="one">
							<input type="checkbox" class="check-box" v-model="all">
						</td>
						<td><span v-text="index+1"></span></td>
						<td class="two" v-text="timetable.name"></td>
						<td class="two" v-text="classess[timetable.classesId]"></td>
						<td class="one">
							<div class="option">
								<div class="edit-icon option-icon">
									<a :href="'public_timetable_item.html?id='+timetable.id"
										style="position: absolute; left: 20%; top: 30%;">
										<img class="img" src="../image/edit.png" height="20" width="20"
											onmouseover="this.src='../image/edit_light.png'"
											onmouseout="this.src='../image/edit.png'" />
									</a>
								</div>
								<div class="delete-icon option-icon" @click="del([timetable.id])"
									style="position: absolute; right: 20%; top: 30%;">
									<img class="img" src="../image/delete.png" height="20" width="20"
										onmouseover="this.src='../image/delete_light.png'"
										onmouseout="this.src='../image/delete.png'" />
								</div>
							</div>
						</td>
					</tr>
				</tbody>
			</table>
		</div>

		<div v-if="show">
			<div class="model-table5">
				<div class="popup">
					<div class="popup-title">课程时段</div>
					<div class="popup-center">
						<div class="popup-box">
							<div class="popup-time">
								<div class="start-time" v-for="(period,index) in lessonPeriods" :key="period.id">
									<div class="layui-input name2" v-text="period.name"></div>
									<span class="del" @click="delItem(index)">移除</span>
								</div>

							</div>
							<div class="popup-time">
								<div class="start-time">
									<input class="layui-input name2 name" placeholder="请输入时段名称" v-model="newPeriod">
								</div>
							</div>
						</div>
						<button class="sure" @click="submit">确定</button>
						<button class="back" @click="show=false">返回</button>
					</div>
				</div>
			</div>
		</div>
		<br>

		<div class="delete" @click="batchDelete" v-if="total>1">批量删除</div>
		<ul class="pagination" v-if="pages>1">
			<li>
				<a v-if="pageNum!=1" @click="pageNum=1">«</a>
				<a class="pages-jump" v-if="pageNum!=1" @click="pageNum--">‹</a>
				<a v-text="pageNum"></a>
				<a class="pages-jump" v-if="pageNum!=pages" @click="pageNum++">›</a>
				<a v-if="pageNum!=pages" @click="pageNum=pages">»</a>
			</li>
		</ul>
	</div>


	<script src="/scriptZIP/qs.min.js"></script>
	<script src="/scriptZIP/vue.min.js"></script>
	<script src="/scriptZIP/axios.min.js"></script>
	<script src="/js/common.js"></script>
	<script src="/js/list.js"></script>

	<script>

		var schoolId = top_params().id;

		var app = new Vue(merge({
			data: {
				classess: {},
				urls: {
					del: '/pc/timetable/del',
					list: '/pc/timetable/list/' + schoolId
				},
				show: false,
				lessonPeriods: [],
				newPeriod: null
			},
			created: function () {
				axios.get('/pc/timetable/period/all/' + schoolId).then(function (res) {
					this.lessonPeriods = res.data;
				}.bind(this));
				axios.get('/pc/classes/all/' + schoolId).then(function (res) {
					res.data.forEach(function (it) {
						this.classess[it.id] = it.name;
					}.bind(this));
				}.bind(this));
				this.getData();
			},
			methods: {
				delItem: function (index) {
					axios.post('/pc/timetable/period/del', [this.lessonPeriods[index].id]).then(function (res) {
						this.lessonPeriods.splice(index, 1);
					}.bind(this));
				},
				submit: function () {
					if (!this.newPeriod) return;
					axios.post('/pc/timetable/period', {
						schoolId: schoolId,
						name: this.newPeriod
					}).then(function (res) {
						this.lessonPeriods.push({ id: new Date().getTime(), name: this.newPeriod });
						this.newPeriod = null;
					}.bind(this));
				}
			}
		}));

	</script>

</body>

</html>